<template>
    <div class="page-body">
        <div class="record-wrapper">
            <div class="record-article">
                <a href="/mall" class="record-article-dec"></a>
                <h2>账户余额</h2>
                <h5>
                    <span>18000</span>
                    <b>优点</b>
                </h5>
            </div>
        </div>
        <div class="record-title">
            <h1>最近交易</h1>
        </div>
        <div class="record-box">
            <pull-to :top-load-method="refresh">
                <ul class="record-list">
                    <li class="record-list-box clearfix">
                        <div class="avatar">
                            <div class="avatar-img t1"></div>
                        </div>
                        <div class="info-box">
                            <div class="info1">
                                <div class="info">支出</div>
                                <p class="date">04-23 12:45:56</p>
                            </div>
                            <div class="info2">
                                -50000
                            </div>
                        </div>
                    </li>
                    <li class="record-list-box clearfix">
                        <div class="avatar">
                            <div class="avatar-img t2"></div>
                        </div>
                        <div class="info-box">
                            <div class="info1">
                                <div class="info">收入</div>
                                <p class="date">04-23 12:45:56</p>
                            </div>
                            <div class="info2 text-orange">
                                +50000
                            </div>
                        </div>
                    </li>
                </ul>
            </pull-to>
        </div>
    </div>

</template>


<script>
import PullTo from 'vue-pull-to';
export default {
    components: {
        PullTo
    },
    data() {
        return { dataList: [] };
    },
    methods: {
        refresh(loaded) {
            // fetchDataList().then(res => {
            //     this.dataList = res.data.dataList;
            //     loaded('done');
            // });
            setTimeout(() => loaded('done'), 2000);
        }
    },
    mounted() {
        document.title = '兑换记录';
    }
};
</script>

<style lang="less" scoped>
.page-body {
    display: flex;
    flex-direction: column;
}
.gray-box {
    height: 0.25rem;
    background: #fafafa;
}
.gray-view {
    background: #fafafa;
}
.record-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 3.7rem;
    font-size: 0;
    text-align: center;
    &:before {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 2.45rem;
        background: #000;
    }
}
.record-article {
    position: relative;
    width: 7.1rem;
    height: 2.4rem;
    padding-top: 0.5rem;
    background-image: url(/static/img/yellow_bg.png);
    font-size: 0;
    text-align: center;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.record-article-dec {
    display: block;
    position: absolute;
    top: 0.9rem;
    height: 0.8rem;
    width: 2.32rem;
    right: 0;
    background-image: url(./../../static/img/yellow_bg1.png);
    text-align: center;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.record-article h2 {
    font-size: 0.32rem;
    height: 0.55rem;
    line-height: 0.55rem;
    color: #fff;
    text-align: left;
    font-weight: 400;
    margin: 0 0.4rem 0.2rem;
}
.record-article h5 {
    text-align: left;
    font-size: 0.28rem;
    color: #fff;
    margin: 0 0.4rem;
}

.record-article span {
    text-align: left;
    font-size: 0.65rem;
    color: #fff;
    vertical-align: baseline;
    font-weight: 400;
    font-family: Simsun;
    margin-right: 0.1rem;
}

.record-article b {
    color: #fff;
    vertical-align: 2px;
    font-weight: 400;
}

.record-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}
.record-title {
    height: 1rem;
    color: #333;
    text-indent: 0.2rem;
    h1 {
        font-size: 0.32rem;
        font-weight: 600;
    }
}
.record-list {
    display: block;
    margin: 0 0.2rem;
}
.record-list-box {
    padding: 0.13rem 0 0rem 1.1rem;
}
.record-list-box .avatar {
    width: 0.8rem;
    margin-left: -1.1rem;
    float: left;
}
.avatar-img {
    width: 0.8rem;
    height: 0.8rem;

    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.t1 {
    background-image: url(./../../static/img/record_icon_1.png);
}
.t2 {
    background-image: url(./../../static/img/record_icon_2.png);
}
.t3 {
    background-image: url(./../../static/img/record_icon_3.png);
}
.record-list-box .info-box {
    padding-bottom: 0.15rem;
    display: flex;
    border-bottom: 1px solid #e2e2e2;
    align-items: center;
}
.record-list-box .info-box .info1 {
    flex: 2;
}
.record-list-box .info-box .info {
    font-size: 0.3rem;
    color: #333;
    font-weight: 600;
}
.record-list-box .info-box .date {
    font-size: 0.24rem;
    color: #666;
}
.record-list-box .info-box .info2 {
    flex: 1;
    text-align: right;
    font-size: 0.3rem;
    color: #333;
    font-weight: 600;
}
.text-orange {
    color: #ff6100 !important;
}
</style>